toggle-width = 25px
toggle-height = toggle-width * 0.8
toggle-line = 2px
transition-duration = 0.4s
lang-select-height = 40px

#mobile-nav
  position: fixed
  top: 0
  width: mobile-nav-width
  left: @width * -1
  height: 100%
  background: color-navy
  transition: transition-duration
  font-family: font-title
  .mobile-nav-on &
    transform: translateX(100%)

#mobile-nav-inner
  overflow-y: auto
  padding: 10px 0
  position: absolute
  top: 0
  bottom: lang-select-height
  left: 0
  right: 0
  -webkit-overflow-scrolling: touch

#mobile-nav-toggle
  position: absolute
  top: 0
  bottom: 0
  left: gutter-width
  width: toggle-width
  height: toggle-height
  margin: auto
  opacity: 0.5
  cursor: pointer
  transition: 0.2s
  &:active, .mobile-nav-on &
    opacity: 1
  @media mq-normal
    display: none

.mobile-nav-toggle-bar
  background: #fff
  position: absolute
  left: 0
  width: 100%
  height: toggle-line
  transition: transition-duration
  transform-origin: 0
  border-radius: toggle-line
  &:first-child
    top: 0
    .mobile-nav-on &
      transform: rotate(45deg)
  &:nth-child(2)
    top: (toggle-height - toggle-line) * 0.5
    .mobile-nav-on &
      opacity: 0
  &:last-child
    top: toggle-height - toggle-line
    .mobile-nav-on &
      transform: rotate(-45deg)

.mobile-nav-link
  color: #fff
  text-decoration: none
  display: block
  padding: 10px 15px
  line-height: 1
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis

.mobile-nav-title
  color: color-link
  font-weight: bold
  padding: 10px 15px
  line-height: 1
  display: block
  border-top: 0px
  margin-top: 10px
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis

.mobile-nav-subtitle
  margin-top: 5px
  padding 7px 20px
  font-size 14px
  font-weight: bold 
  font-family: font-title
  color: #fff
  display: inline-block
  line-height: 1em
  outline 0
  &:hover
    background-color #F2F2F2
    color: #000
  
#mobile-lang-select-wrap
  position: absolute
  bottom: 0
  left: 0
  width: 100%
  background: color-navy
  border-top: 1px solid #444

#mobile-lang-select-label
  line-height: lang-select-height
  color: #fff
  padding: 10px 15px
  i
    opacity: 0.7
  span
    padding-left: 8px

#mobile-lang-select
  -webkit-appearance: menulist-button
  opacity: 0
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%

#container
  transition: transition-duration
  height: 100%
  overflow: auto
  -webkit-overflow-scrolling: touch
  .mobile-nav-on &
    transform: translateX(mobile-nav-width)
    overflow: hidden

#mobile-nav-dimmer
  position: absolute
  top: 0
  left: 100%
  width: 100%
  height: 100%
  background: #000
  opacity: 0
  transition: opacity transition-duration, transform 0s transition-duration
  .mobile-nav-on &
    opacity: 0.7
    transform: translateX(-100%)
    transition: opacity transition-duration

ul
  &.topnav
    padding 0
    margin 0
    font-size 1em
    line-height 0.5em
    list-style none
    strong
      &:hover
        background-color #F2F2F2
    li
      a
        &:hover
          color: color-link-hover
    ul
      margin 0
      padding 0
      display none
      li
        margin 0
        padding 0
        font-size 15px
        font-weight normal
        clear both
        a
          padding 7px 20px
          font-size 14px
          font-weight normal
          outline 0
          &:hover
            color: color-link-hover
      ul
        li
          a
            color #000
            padding-left 30px

    span
      float right


  ul
    &.topnav
      li
        a
          line-height 10px
          font-size 11px
          padding 10px 5px
          color #000
          display block
          text-decoration none
          font-weight bolder    